// 从node的包中寻找
const path = require('path')
// 将入口和出口配置到文件中,文件名固定为webpack.config.js,这样在打包时,直接输入webpack即可
module.exports = {
    // 入口: 需要进行打包的文件(起始文件)
    entry: './src/main.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'), //绝对路径: 动态的获取路径
        filename: 'bundle.js', //文件名
        publicPath: 'dist/' //当有url地址时(如图片位置),自动在前面添加 dist/ 路径
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            // css-loader负责将css文件进行加载
            // style-loader负责将样式添加到dom中让其生效
            // 使用多个loader时,是从右向左读的,所以css-loader放在右边
            use: ['style-loader','css-loader']
          },
          // 解析less文件
          {
            test: /\.less$/,
            use: [{
                loader: "style-loader" 
            }, {
                loader: "css-loader" 
            }, {
                loader: "less-loader" 
            }]
           },
           // 解析图片  npm install --save-dev url-loader
           {
              test: /\.(png|jpg|gif|jpeg)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    // 当加载的图片,小于limit时,会将图片编译成base64字符串形式
                    // 当加载的图片,大于limit时,需要使用file-loader模块进行加载(npm install --save-dev file-loader)
                    limit: 13000,
                    /*
                      webpack自动生成一个一个32位hash值,目的是防止名字重复,但真实开发中可能对打包的图片名字有一定的要求
                      所以可以在options中添加上如下选项
                        img: 文件要打包到的文件夹
                        name: 获取图片原来的名字,放在该位置
                        hash:8: 为了防止图片名称冲突,依然使用hash,但只保留8位
                        ext: 使用图片原来的扩展名
                    */
                    name: 'img/[name].[hash:8].[ext]'
                  }
                }
              ]
            },
            // 将ES6的语法转成ES5防止一些对ES6还不支持的浏览器没有办法运行代码
            // npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
            {
              test: /\.js$/,
              // 排除一些模块,不需要参与转化
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015']
                }
              }
            },
            // 以.vue結尾的特殊的文件以及特殊的格式,需要使用vue-loader以及vue-template-compiler帮助处理
            // npm install vue-loader vue-template-compiler --save-dev
            {
              test: /\.vue$/,
              use: ['vue-loader']
            }
        ]
    },
    resolve: {
      // 路径省略后缀名
      extensions: ['.js','.css','.vue'],
      // Vue不同版本构建: runtime-only和runtime-compiler
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
}